<template>
  <div class="pieChartBox" style="width: 100%; margin: 0 auto" :id="id"></div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    pieData: {
      type: Array,
    },
    total: {
      type: Number,
      default: "",
    },
  },
  methods: {
    //add 字体自适应
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 750);
      return res * fontSize;
    },

    getOption: function () {
      let _this = this;
      let colorArr = ["#00B4F8", "#FFC800", "#FB5F40", "#A353DC"];
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        // legend: {
        //   top: "5%",
        //   left: "center",
        // },
        title: {
          text: "总资产",
          subtext: _this.total + "亿",
          left: "center",
          top: "35%",
          textStyle: {
            fontSize: "13",
            fontWeight: "normal",
            color: "#000",
          },
          subtextStyle: {
            fontSize: "13",
            fontWeight: "bold",
            color: "#121c32",
          },
        },
        series: [
          {
            type: "pie",
            data: _this.pieData,
            radius: ["70%", "100%"],
            silent: true, //取消图例上的点击事件
            label: false,
            labelLine: false,
          },
        ],
        color: colorArr,
      };
      return option;
    },

    showPieChart() {
      if (this.id) {
        let myChart = this.$echarts4.init(document.getElementById(this.id));
        if (this.getOption() && typeof this.getOption() === "object") {
          this.getOption() && myChart.setOption(this.getOption());
        }
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    },
  },
  mounted() {
    if (this.id) {
      let myChart = this.$echarts4.init(document.getElementById(this.id));
      this.showPieChart();
      myChart.getZr().on("click", (res) => {
        //拿到index即可取出被点击数据的所有信息
      });
    }
  },
};
</script>

<style>
</style>
